<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>设置中心</el-breadcrumb-item>
                    <el-breadcrumb-item>发布消息</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-button type="primary" @click="showDialog = true">添加消息</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80" />
                    <el-table-column prop="title" label="消息标题" width="200" />
                    <el-table-column label="消息图片" width="160">
                        <template #default="scope">
                            <div v-if="scope.row.imgurl">
                                <img style="width: 120px; height: 50px;" :src="scope.row.imgurl" />
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="消息内容" />
                    <el-table-column prop="create_time" label="添加时间" width="200" />
                    <el-table-column label="操作操作" width="150">

                        <template #default="scope">
                            <el-popconfirm title="确定删除此消息?" @confirm="admin_news_delete(scope.row.id)">
                                <template #reference>
                                    <el-button type="danger" :icon="Delete">删除消息</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>


                </el-table>
                <!-- 分页 -->
                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>


    <!-- 添加管理员 -->
    <el-dialog v-model="showDialog" title="发布消息" center width="38%" @close="handleClose">
        <el-form label-width="100px">
            <el-form-item label="消息标题">
                <el-input type="text" v-model="formData.title" placeholder="列如：刘德华" />
            </el-form-item>
            <el-form-item label="消息图片">
                <el-input type="text" v-model="formData.imgurl" disabled placeholder="图片尺寸要求：670*275px  (没有图片可以跳过)">
                    <template #append>
                        <el-button @click="ImageUpload()">选择图片</el-button>
                    </template>
                </el-input>

                <div style="display: flex; flex-direction: column; position: relative;">
                    <div v-if="formData.imgurl"
                        style="width: 150px; height: 150px; border: solid 1px #e6e6e6; margin-top: 5px;">
                        <img style="width: 150px; height: 150px;" :src="proxy.$httpUrl+formData.imgurl" />
                    </div>

                    <div v-if="formData.imgurl"
                        style="width: 20px; height: 20px; position: absolute; top: 5px; right: -20px;"
                        @click="formData.imgurl = ''">
                        <svg t="1678712155966" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4668" width="20" height="20">
                            <path
                                d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                                fill="#d81e06" p-id="4669"></path>
                            <path
                                d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                                fill="#d81e06" p-id="4670"></path>
                        </svg>
                    </div>
                </div>

            </el-form-item>

            <el-form-item label="消息内容">
                <el-input v-model="formData.content" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea"
                    placeholder="请输入消息内容" />
            </el-form-item>


        </el-form>
        <template #footer>
            <el-button type="danger" @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="SubmitFormData">保存</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, inject, getCurrentInstance } from 'vue'
import { success, error } from '@/common/tool/message.js'
import { request_post } from '@/common/axios/request.js'
import { ArrowRightBold, Delete } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const showDialog = ref(false)
const tableData = reactive({ list: [] })

const formData = reactive({
    title: '',
    imgurl: null,
    content: ''
})

function SubmitFormData() {
    admin_news_create()
}

onMounted(() => {
    admin_news_index()
})

// 获取机器人列表
function admin_news_index() {
    request_post('/admin_news_index', page).then(res => {
        console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })
}

// 添加机器人
function admin_news_create() {

    if (formData.robot_imgurl == '') {
        return error('机器人图片不能为空')
    }
    request_post('/admin_news_create', formData).then(res => {
      location.reload()
        if (res.data.code == 200) {
            admin_news_index()
            showDialog.value = false
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 删除机器人
function admin_news_delete(id) {

    request_post('/admin_news_delete', { id }).then(res => {
        if (res.data.code == 200) {
            admin_news_index()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}


// 分页
const page = reactive({
    pagenum: 1,
    pagesize: 15,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_news_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_news_index()
}


function handleClose() {
    formData.title = ''
    formData.imgurl = ''
    formData.content = ''
}

// 图片上传
const imageUrl = ref(inject('imageUrl'))
const imageModel = inject('showImageModel')
function ImageUpload() {
    imageModel()
    formData.imgurl = imageUrl
}
</script>

<style></style>
